<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>3-component-class</title>
  </head>

  <body>
    <div id="component-class">
      <my-component class="baz boo"></my-component>
    </div>
    <script>
      const app = Vue.createApp({}).mount('#component-class');

      app.component('my-component', {
        // 如果你的组件有多个根元素，
        // 你需要定义哪些部分将接收这个类。
        // 可以使用 $attrs 组件属性执行此操作：
        template: `<p class="$attrs.class">Hi!</p>
                   <span>This is a child component</span>`,
      });
    </script>
  </body>
</html>
